<template>
  <div class="register">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../assets/images/icon_fanhui.png"/>
      </a>
      <a class="header_center" slot="center">
        <span>{{headerTitle}}</span>
      </a>
    </header-top>
    <div class="register-content">
      <div class="register-input-box">
        <div class="register-input register-input-phone" ref="phone">
          <input style="width:55%;" type="text" placeholder="手机号" v-model="phone" @focus='phoneFocus'
                 @blur="phoneBlur"/>
          <div class="register-input-send-code" @click="sendCode">
            发送验证码
          </div>
          <img class="delIcon1" src="../../assets/images/icon_del.png"
               @click.stop="phone=''" v-show="(phone=='' || !phoneInput)? false: true"/>
        </div>
        <p class="line" v-show="registerInputHr"/>
        <div class="register-input register-input-code" ref="code">
          <input type="text" placeholder="请输入手机短信中的验证码" v-model="code" @focus='codeFocus' @blur="codeBlur"/>
          <img class="delIcon2" src="../../assets/images/icon_del.png" @click.stop="code=''"
               v-show="(code=='' || !codeInput)? false: true"/>
        </div>
      </div>
      <div class="register-footer">
        <div>
          <x-button type="primary" :disabled="btnNext" @click.native="next">下一步</x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import {XButton} from 'vux'

  export default {
    name: "Register",
    components: {
      HeaderTop,
      XButton
    },
    mounted() {
      var {type} = this.$route.params;
      if (type == 'old') {
        this.headerTitle = '找回密码';
      }
    },
    data() {
      return {
        phone: '',
        code: '',
        registerInputHr: true,
        phoneInput: false,
        codeInput: false,
        headerTitle: '注册'
      }
    },
    methods: {
      next() {
        const {phone, code} = this;
        const {type} = this.$route.params;
        if (phone && code) {
          if (type == 'new') {
            this.$router.push('/password/old');
          } else if (type == 'old') {
            this.$router.push('/password/new');
          }
        }
      },
      sendCode() {
        const {phone} = this;
        if (phone) {
          console.log(phone);
        }
      },
      phoneFocus() {
        let phoneRef = this.$refs.phone;
        phoneRef.style.borderBottom = '1px solid #ffdccd';
        phoneRef.style.borderColor = '#ff6633';
        this.registerInputHr = false;
        this.phoneInput = true;
      },
      phoneBlur() {
        let phoneRef = this.$refs.phone;
        phoneRef.style.borderBottom = 'none';
        phoneRef.style.borderColor = '#ffdccd';
        this.registerInputHr = true;
        setTimeout(() => this.phoneInput = false, 100);
      },
      codeFocus() {
        let codeRef = this.$refs.code;
        codeRef.style.borderTop = '1px solid #ffdccd';
        codeRef.style.borderColor = '#ff6633';
        this.registerInputHr = false;
        this.codeInput = true;
      },
      codeBlur() {
        let codeRef = this.$refs.code;
        codeRef.style.borderTop = 'none';
        codeRef.style.borderColor = '#ffdccd';
        this.registerInputHr = true;
        setTimeout(() => this.codeInput = false, 100);
      }
    },
    computed: {
      btnNext() {
        let {phone, code} = this;
        if (phone && code) {
          return false;
        } else {
          return true;
        }
      }
    }
  }
</script>

<style scoped>
  .register {
    overflow-y: hidden;
  }

  .register-input-box {
    background-color: #fff;
    margin: 25px;
    margin-top: 73px;
  }

  .register-input {
    border: 1px solid #ffdccd;
    background-color: #fff;
  }

  .register-input-phone {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: none;
  }

  .register-input-code {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: none;
  }

  .register-input img {
    width: 24px;
    height: 24px;
    margin: 12px;
    float: left;
    position: absolute;
  }

  .delIcon1 {
    right: 140px;
  }
  .delIcon2 {
    right: 28px;
  }

  input {
    width: 75%;
    height: 48px;
    border: none;
    font-size: 14px;
    padding-left: 20px;
  }

  input:hover {
    border: none;
    outline: none;
  }

  input:focus {
    outline: none;
  }

  .register-input-send-code {
    width: 110px;
    float: right;
    height: 48px;
    line-height: 48px;
    background-color: #ff6633;
    text-align: center;
    color: #fff;
    font-size: 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .register-footer div {
    margin: 25px;
    height: 48px;
    line-height: 48px;
    margin-top: -10px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
  }


</style>
